<template>
	<view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="m-2 p-2 bg-white rounded-20" v-if="video_src">
				<video class="rounded-20 w-100"  id="myVideo" :src="video_src" show-fullscreen-btn='true' @play="play_video"></video>
			</view>
			<view class="m-2 text-8e8e8e font-29">
				<view class="">大小：10MB，15秒以内的视频；</view>
				<view class="">格式：只支持MP4格式；</view>
			</view>
			<view class="d-flex sub j-sb bg-white p-2 w-100 position-fixed bottom-0">
				<button type="warn" class="dele" @click="sub_dele">删除视频</button>
				<button type="warn" class="replace" @click="sub_rele">替换视频</button>
			</view>	
		</view>
		<!-- 删除提示 -->
		<u-popup v-model="popup_show" class="logOutPopup" mode='center' border-radius="20">
			<view class="popup_wd">
				<view class="py-5 text-center bg-white">您确定要删除该视频内容吗？</view>
				<view class="d-flex  bg-light-secondary border-top">
					<view class="flex-1 py-2 text-center border-right text-danger" @click="Off_dele">取消</view>
					<view class="flex-1 py-2 text-center text-danger" @click="Confirm_dele">确定</view>
				</view>	
			</view>	
		</u-popup>
		<u-toast ref="uToast"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				video_detail:"",
				video_src:"",
				popup_show:false,
				goods_id:"",
				u_loadmore:true, // 加载中
			}
		},
		methods: {
			// 删除视频
			sub_dele(){
				this.popup_show=true
			},
			// 取消弹框
			Off_dele(){
				this.popup_show=false
			},
			// 确定删除
			Confirm_dele(){
				this.$H.post("v2/store/goods/video/delete",{
					goods_id:this.goods_id
				}).then(res=>{
					uni.navigateBack({
						delta:1
					})
				})
			},
			// 开始
			play_video(){
				console.log(111)
			},
			// 替换视频
			sub_rele(){
				uni.chooseVideo({
				    count: 1,
					maxDuration:15,
					compressed:false,
				    sourceType: ['album'],
				    success: (res)=>{
				       let tempFilePath= res.tempFilePath;
						uni.uploadFile({
							url:`${this.localConfig.web_Url}v2/store/medialibrary/file/temp/upload`,
							filePath:res.tempFilePath,
							name:"tempfile",
							formData:{
								'token':uni.getStorageSync("token"),
							},
							success: (res) => {
								let fileData=JSON.parse(res.data)
								console.log(fileData)
								this.$H.post("v2/store/goods/video/update",{
									goods_id:this.goods_id,
									goods_video:fileData.data
								}).then(res=>{
									if(res.status.succeed==0){
										this.$refs.uToast.show({
											title: '上传文件大小不符！',
											type: 'default',
										})
									}else{
										uni.showLoading({
											title:"正在上传",
											success: () => {
												this.video_src = tempFilePath
												uni.hideLoading()
											}
										})
										
									}
								})
							}
						})
				    }
				});
			}
		},
		onLoad(e) {
			this.goods_id=e.goods_id
			this.$H.post("admin/merchant/goods/detail",{goods_id:e.goods_id}).then(res=>{
				this.video_detail=res.data
				this.video_src=res.data.goods_video_url
				this.u_loadmore=false 
			})
		},
	}
</script>

<style>
	.sub{
			z-index: 111;
		}
	.sub /deep/ .dele{
		border: 1px solid #fb0d1b;
		background-color: #FFFFFF;
		border-radius: 50upx;
		width: 45%;
		color: #fb0d1b;
	}
	.sub /deep/ .dele::after{
		border: none;
		color: #000000;
	}
	.sub /deep/ .replace{
		width: 45%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.text-8e8e8e{
		color: #8e8e8e;
	}
	.logOutPopup /deep/ .popup_wd{
		width: 600upx;
	}
</style>
